import React, { useEffect } from 'react'
import styles from './index.module.scss'
import { Link } from 'react-router-dom'
import Icon from '@/components/Icon'
import { useDispatch, useSelector } from 'react-redux'
import { getUser } from '@/store/actions/profile'

/*
	ip地址:
		xxx.xxxx.xxx 计算机需要接入网络(互联网, 局域网), 都会分配一个标识, 这个标识就是ip地址, 通过ip地址就能找到
			某一台计算机

	端口号:
		每一个程序在计算机上运行, 起始需要占用端口, 80端口 http: 3306, 通过端口可以找到计算机上某一个具体的程序

	域名:
		www.jd.com www.taobao.com 域名好记, 越好记的域名越贵, ip地址不好记

	域名解析:
		1 浏览器需要解析域名
			1.1 浏览器会先查询计算机本地磁盘下的hosts文件, 如果本地通过hosts得到了对应的ip地址(域名劫持)

			1.2 如果没有得到ip地址, 会查询网络上的DNS服务器, 根据DNS服务器得到对应的ip地址

		2. 浏览器根据得到的ip地址访问真正的服务器, 请求资源,读取url地址中的path部分(如果没有path,默认会请求index,html)
			2.1 http协议(tcp/ip, tcp建立连接, 三次握手)

		3. 服务器会根据请求的url地址查找对应的资源包括html, css, js, img等数据, 
		
		4. 服务器把资源响应给浏览器(4次挥手(响应断开,在握手的前提中加入了释放资源))

		5. 浏览器渲染
			5.1 浏览器解析html的标签, 内存中生成DOM数(head, 隐藏的标签), 同时, 解析css样式, 生成css规则

			5.2 浏览器DOM数和css规则进行联合, 生成渲染树(只有渲染的标签)

			5.3 对渲染树进行布局, 根据元素的样式position, width, height, left

			5.4 对整个渲染树进行渲染

			性能优化:
				重绘

				回流
					1. 尽量少用style, 使用class

					2. 对于会影响到其他盒子的元素, 需要修改大小, 可以使用定位

					3. 使用代码片段document.createFragment()

					4. display: none; display: block

					5. 尽量不要使用scrollTop, scrollLeft, offsetWidth, offsetHeight 会强制回流
				
*/ 

export default function Profile() {
	const dispatch = useDispatch()
	useEffect(() => {
		dispatch(getUser())
	}, [dispatch])

	const user = useSelector((state) => state.profile.user)

	const { art_count, fans_count, follow_count, like_count, name, photo } = user

	return (
		<div className={styles.root}>
			<div className="profile">
				<div className="user-info">
					<div className="avatar">
						<img src={photo} alt="" />
					</div>

					<div className="user-name">{name}</div>

					<Link to="/profile/edit">
						个人信息 <Icon type="iconbtn_right"></Icon>
					</Link>
				</div>

				<div className="read-info">
					<Icon type="iconbtn_readingtime"></Icon>
					今日阅读 <span>10</span> 分钟
				</div>

				<div className="count-list">
					<div className="count-item">
						<p>{art_count}</p>
						<p>动态</p>
					</div>
					<div className="count-item">
						<p>{follow_count}</p>
						<p>关注</p>
					</div>
					<div className="count-item">
						<p>{fans_count}</p>
						<p>粉丝</p>
					</div>
					<div className="count-item">
						<p>{like_count}</p>
						<p>被赞</p>
					</div>
				</div>

				<div className="user-links">
					<div className="link-item">
						<Icon type="iconbtn_mymessages"></Icon>
						<div>消息通知</div>
					</div>
					<div className="link-item">
						<Icon type="iconbtn_mycollect"></Icon>
						<div>我的收藏</div>
					</div>
					<div className="link-item">
						<Icon type="iconbtn_history1"></Icon>
						<div>阅读历史</div>
					</div>
					<div className="link-item">
						<Icon type="iconbtn_myworks"></Icon>
						<div>我的照片</div>
					</div>
				</div>
			</div>
			<div className="more-service">
				<h3>更多功能</h3>
				<div className="service-list">
					<div className="service-item">
						<Icon type="iconbtn_feedback"></Icon>
						<div>
							<Link to="/profile/feedback">用户反馈</Link>
						</div>
					</div>
					<div className="service-item">
						<Icon type="iconbtn_xiaozhitongxue"></Icon>
						<div>
							<Link to="/profile/Chat">小智同学</Link> 
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}
